<template>
  <!-- 充氧宝全部订单 -->
  <div class="app-container">
    <div class="head_search u-f u-f-ac u-fw">
      <div class="ipt_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{ $t("订单号") }}：</p>
        <el-input v-model="order_id" :placeholder="$t('请输入订单号')"></el-input>
      </div>
      <div class="ipt_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{ $t("会员号") }}：</p>
        <el-input v-model="member_id" :placeholder="$t('请输入会员号')"></el-input>
      </div>
      <div class="ipt_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{ $t("机柜号") }}：</p>
        <el-input v-model="device_id" :placeholder="$t('请输入机柜号')"></el-input>
      </div>
      <div class="select_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{ $t("客户端") }}：</p>
        <el-select v-model="clientVal" :placeholder="$t('请选择')" @change="clientChange">
          <el-option v-for="item in clientArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="select_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{ $t("订单状态") }}：</p>
        <el-select v-model="orderStatusVal" :placeholder="$t('请选择')" @change="orderStatusChange">
          <el-option v-for="item in orderStatusArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="div_box u-f u-f-ac" v-if="shanghu">
        <p class="label font14 text_black">{{ $t("所属代理商") }}：</p>
        <div class="content font14 text_black u-f u-f-ac" @click="openAgentList">
          <p class="text-ellipsis">{{ agent ? agent : $t("选择代理商") }}</p>
        </div>
        <button class="btn font14 text_white bg_danger" @click="clearAgent">
          {{ $t("清除") }}
        </button>
      </div>
      <div class="div_box u-f u-f-ac">
        <p class="label font14 text_black">{{ $t("所属商户") }}：</p>
        <div class="content font14 text_black u-f u-f-ac" @click="openMerchantList">
          <p class="text-ellipsis">
            {{ merchant ? merchant : $t("选择商户") }}
          </p>
        </div>
        <button class="btn font14 text_white bg_danger" @click="clearMerchant">
          {{ $t("清除") }}
        </button>
      </div>
      <div class="date_box u-f u-f-ac">
        <p class="label font14 text_black">{{ $t("下单时间") }}：</p>
        <el-date-picker v-model="dates" type="datetimerange" :picker-options="pickerOptions" :range-separator="$t('至')"
          :start-placeholder="$t('开始日期')" unlink-panels :end-placeholder="$t('结束日期')" align="right"
          value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        <!-- <p class="tip font14 text_danger">{{ $t("只能选择一个月的范围") }}</p> -->
      </div>
      <button class="sub_btn font14 text_white bg_blue" @click="getData('search')">
        {{ $t("提交") }}
      </button>
      <button class="sub_btn font14 text_white bg_blue" @click="downloadsss()" style="margin-left: 10px;">
        {{ $t("导出") }}
      </button>
    </div>
    <p class="head_tip font14 text_danger">
      {{ $t("72小时内的订单可以撤销") }},{{ $t("撤销订单后") }},
      {{ $t("订单金额会退回用户余额") }},{{ $t("所有代理佣金也将撤销") }}
    </p>

    <div>
      <el-table :data="tableData">
        <el-table-column prop="order_no" :label="$t('订单ID')" width="180px">
          <template slot-scope="{ row }">
            <div class="order_no">
              <div class="danger" v-if="row.is_hidden == 1">*</div>
              <span>{{ row.order_no }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="member_id" :label="$t('会员号')" width="90"></el-table-column>
        <el-table-column prop="start_time" :label="$t('使用时间')" width="160">
          <template slot-scope="{ row }">
            <span>{{ row.start_time }} {{ row.end_time }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="order_status" :label="$t('订单状态')">
          <template slot-scope="{ row }">
            <span v-if="row.order_status == 1">{{ $t("租借中") }}</span>
            <span v-if="row.order_status == 2">{{ $t("已完成") }}</span>
            <span v-if="row.order_status == 3">{{ $t("已撤销") }}</span>
            <span v-if="row.order_status == 4">{{ $t("订单超时") }}</span>
            <span v-if="row.order_status == 5">{{ $t("申请结束") }}</span>
            <span v-if="row.order_status == 6">{{ $t("丢失充氧宝") }}</span>
            <span v-if="row.order_status == 7">{{ $t("已归还未付款") }}</span>
            <span v-if="row.order_status == 8">{{ $t("待支付") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="amount" :label="$t('金额')"></el-table-column>
        <el-table-column prop="nick" :label="$t('用户名称')"></el-table-column>
        <el-table-column prop="app_name" :label="$t('客户端')"></el-table-column>
        <el-table-column prop="seller_name" :label="$t('商户名称')"></el-table-column>
        <el-table-column prop="agency_name" :label="$t('所属代理')"></el-table-column>

        <el-table-column prop="device_code" :label="$t('机柜号')" width="140"></el-table-column>
        <el-table-column prop="battery_id" :label="$t('充氧宝')" width="130"></el-table-column>

        <el-table-column :label="$t('操作')" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button v-if="permissions.indexOf('/order/detail') != -1" size="mini" type="success"
              @click="handleDetail(scope.row)">{{ $t("详情") }}</el-button>
            <el-button size="mini" type="primary" @click="handleEdit(scope.row)" v-if="scope.row.is_cancel &&
              permissions.indexOf('/order/modifyBattery') != -1
              ">{{ $t("修改") }}</el-button>
            <el-button size="mini" type="danger" v-if="scope.row.is_end &&
              permissions.indexOf('/order/endBattery') != -1
              " @click="handleDelete(scope.row)">{{ $t("结束") }}</el-button>
            <el-button size="mini" type="primary" v-if="scope.row.is_hidden == 1
              " @click="handleBack(scope.row)">回退</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination_box ">
        <el-pagination background @current-change="handleCurrentChange" :current-page="page" :page-size="page_size"
          layout="total, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 订单详情和修改 -->

    <orderDetailDialog ref="orderDetail" :detailFrom="detailFrom" :orderNum="order_num" :isUpdate="isUpdate" @updateSubmit="updateSubmit" @toCustomer="toCustomer" />
    
    <!-- 结束订单 -->
    <orderCloseDialog ref="orderClose" :endOrderFrom="endOrderFrom" :Radio="radio" :payAmount="pay_amount"  @endOrderSubmit="endOrderSubmit"/>

    <agent-list ref="agentList" :memusid="memusid" :uid="uid" @hide="closeAgentList"></agent-list>
    <merchant-list ref="merchantList" :memusid="memusid" :uid="uid" :agency_id="aid" @hide="closeMerchantList"></merchant-list>
    <refresh @click="handleRefresh"></refresh>
  </div>
</template>

<script>
import agentList from "components/agent-list/agent-list.vue";
import merchantList from "components/merchant-list/merchant-list.vue";

import orderDetailDialog from "components/order/orderDetailDialog.vue"
import orderCloseDialog from "components/order/orderCloseDialog.vue"
import { mapState, mapMutations } from "vuex";
import util from "@/assets/js/util.js";
export default {
  name: "order-batteryList",
  data() {
    let that = this;
    return {
      shanghu: true,
      daili: true,
      page: 1,
      page_size: 20,
      total: 0,
      order_id: "",
      member_id: "",
      device_id: "",
      clientVal: 0,
      clientArr: [
        {
          value: 0,
          label: that.$t("选择客户端"),
        },
        {
          value: 1,
          label: that.$t("微信小程序"),
        },
        {
          value: 2,
          label: that.$t("支付宝小程序"),
        },
      ],
      orderStatusVal: 0,
      orderStatusArr: [
        {
          value: 0,
          label: that.$t("选择订单状态"),
        },
        {
          value: 1,
          label: that.$t("租借中"),
        },
        {
          value: 2,
          label: that.$t("已完成"),
        },
        {
          value: 3,
          label: that.$t("已撤销"),
        },
        {
          value: 4,
          label: that.$t("订单超时"),
        },
        {
          value: 5,
          label: that.$t("申请结束"),
        },
        {
          value: 6,
          label: that.$t("丢失充氧宝"),
        },
        {
          value: 7,
          label: that.$t("已归还未付款"),
        },
      ],
      agent: "",
      aid: "",
      merchant: "",
      sid: "",
      dates: "",
      pickerOptions: {
        shortcuts: [
          {
            text: that.$t("最近一周"),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: that.$t("最近一个月"),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 3);
              // start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近十二个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 12);
              // start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
              picker.$emit('pick', [start, end]);
            }
          },
        ],
      },
      tableData: [],
      showOrderDetail: false,
      isUpdate: false,
      detailFrom: {},
      order_num: 0,
      showEndOrder: false,
      endOrderFrom: {},
      radio: 1,
      pay_amount: 0,
      batteryLog: false,
      logTable: [
        {
          device_id: "CT024191003189",
          user_time: "2020-04-02 10:03:07",
          operator: "客户",
          remarks: "订单号:202001011440334968",
        },
      ],
      endRemark: ''
    };
  },
  computed: {
    ...mapState(["permissions","memusid","uid","name"]),
  },
  components: {
    agentList,
    merchantList,
    orderDetailDialog,
    orderCloseDialog
  },
  mounted() {
    let arr = util.getDate('month')
    this.dates = [arr[0] + ' 00:00:00', arr[1] + ' 23:59:59']
    // this.getData();
    //判断一下
    if(this.memusid == 5){
      // this.daili = false;
      
      this.aid = this.uid;
      console.log("打印一下this.aid")
      console.log(this.aid);
      this.agent = this.name;
    }else if(this.memusid == 6){
      // this.daili = false;
      this.shanghu = false;
      this.orderAll();
      return;
      // this.getAgentData()
      //查询一下接口当前的商户管理员下面的所有的商户
      //查询一下接口当前的商户管理员下面的所有的商户的消息
      // this.sid = this.uid;
      // this.merchant = this.name;
    }
    this.getData();
  },
  methods: {
    ...mapMutations(['setActiveMenu', 'setMenuArray', 'addKeepAlive']),
    //跳转会员
    toCustomer(id) {
      console.log(id);
      let orderDetail = this.$refs.orderDetail  //组件实例
      orderDetail.hide()
      this.$router.push({
        name: 'customer',
        query: { id }
      })
      let obj = {
        icon: '',
        id: 46,
        index: '/customer/index',
        pid: 4,
        title: '用户管理'
      }
      this.setMenuArray(obj)
      this.setActiveMenu(obj)
      this.addKeepAlive('customer-index')
    },

    handleRefresh() {
      let arr = util.getDate('month')
      this.dates = [arr[0] + ' 00:00:00', arr[1] + ' 23:59:59']
      this.page = 1;
      this.page_size = 20;
      this.order_id = "";
      this.member_id = "";
      this.aid = "";
      this.device_id = "";
      this.clientVal = 0;
      this.sid = "";
      this.orderStatusVal = 0;
      this.getData();
    },
    downloadsss() {
      util
        .$http("/order/batteryList?page=" + this.page, {
          page_size: 900,
          order_no: this.order_id,
          member_id: this.member_id,
          aid: this.aid,
          device_code: this.device_id,
          app_type: this.clientVal,
          sid: this.sid,
          status: this.orderStatusVal,
          start_time: this.dates[0] || "",
          end_time: this.dates[1] || "",
          is_excel: 1
        })
        .then((res) => {
          // console.log(res.data)
          // res.data
          let arr = res.data.split("public");
          let hree = 'https://cdb.workair.vip'+arr[1];
          console.log("打印地址")
          window.open(hree, '_blank');
          if (res.code == 301) {
            window.location.href = res.msg
          }
        });
    },
    orderAll(type){
      if (type == "search") {
        this.page = 1;
      }

      util
        .$http("/order/orderAll?page=" + this.page, {
          page_size: this.page_size,
          order_no: this.order_id,
          member_id: this.member_id,
          device_code: this.device_id,
          app_type: this.clientVal,
          uid: this.uid,
          status: this.orderStatusVal,
          start_time: this.dates[0] || "",
          end_time: this.dates[1] || "",
        })
        .then((res) => {
          if (res.code == 1) {
            this.total = res.data.total;
            this.tableData = res.data.list;
          }
        });

    },
    
    getData(type) {
      // console.log("打印一下是否是ok？")
      if (type == "search") {
        this.page = 1;
      }
      if(this.memusid==6&&this.sid==''){
        this.orderAll('search');
        return;
      }
      util
        .$http("/order/batteryList?page=" + this.page, {
          page_size: this.page_size,
          order_no: this.order_id,
          member_id: this.member_id,
          aid: this.aid,
          device_code: this.device_id,
          app_type: this.clientVal,
          sid: this.sid,
          status: this.orderStatusVal,
          start_time: this.dates[0] || "",
          end_time: this.dates[1] || "",
        })
        .then((res) => {
          if (res.code == 1) {
            this.total = res.data.total;
            console.log("打印一下子哦")
            this.tableData = undefined;
            this.tableData = [];
            var tableData1 = res.data.list;
            // this.tableData = tableData1.keys(object).map(key => object[key])
            this.tableData = Object.values(tableData1)
            console.log("打印一下子哦")
            console.log(this.tableData)
          }
        });
    },
    clientChange(val) {
      this.clientVal = val;
    },
    orderStatusChange(val) {
      this.orderStatusVal = val;
    },
    openAgentList() {
      this.$refs.agentList.show();
    },
    closeAgentList(data) {
      this.agent = data.name;
      this.aid = data.id;
      this.merchant = "";
      this.sid = "";
    },
    clearAgent() {
      this.agent = "";
      this.aid = "";
      if(memusid==5){
        this.aid = uid;
      }
      
      this.merchant = "";
      this.sid = "";
    },
    openMerchantList() {
      this.$refs.merchantList.show();
    },
    closeMerchantList(data) {
      this.merchant = data.name;
      this.sid = data.id;
    },
    clearMerchant() {
      this.merchant = "";
      this.sid = "";
    },
    handleDetail(row) {
      let orderDetail = this.$refs.orderDetail  //组件实例
      this.isUpdate = false;
        util
          .$http("/order/detail", {
            order_no: row.order_no,
          })
          .then((res) => {
            if (res.code == 1) {
              orderDetail.show()
              // this.detailFrom = res.data;
              this.detailFrom = { ...res.data, ...res.data.extend_info }
              this.order_num = res.data.amount;
            }
          });
    },
    handleEdit(row) {
      let orderDetail = this.$refs.orderDetail  //组件实例
       this.isUpdate = true;
      util
        .$http("/order/detail", {
          order_no: row.order_no,
        })
        .then((res) => {
          if (res.code == 1) {
            orderDetail.show()
            this.detailFrom =  {...res.data,...res.data.extend_info }
            this.order_num = res.data.amount;
          }
        });
    },
    updateSubmit(item) {
      util
        .$http("/order/modifyBattery", {
          order_no: this.detailFrom.order_no,
          amount: item.order_num,
          reason: item.endRemark,
          remark: item.clientValRe
        })
        .then((res) => {
          if (res.code == 1) {
            item.hide()
            this.$message({
              message: res.msg,
              type: "success",
            });
       
            this.isUpdate = false;
            this.getData();
          }
        });
    },
    handleDelete(row) {
      let orderClose = this.$refs.orderClose  //结束组件实例
        util
          .$http("/order/endDialog", {
            order_no: row.order_no,
          })
          .then((res) => {
            if (res.code == 1) {
              orderClose.show()
              this.endOrderFrom = res.data;
              this.radio = Number(res.data.returned);
              this.pay_amount = res.data.amount;
            }
          });
    },
    endOrderSubmit(item) {
      util
        .$http("/order/endBattery", {
          order_no: item.order_no,
          returned: item.radio,
          amount: item.pay_amount,
          reason: item.endRemark,
          remark: item.clientValRe
        })
        .then((res) => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            item.hide()
            this.getData();
          }
        });
    },
    handleCurrentChange(val) {
      this.page = Number(val);
      this.getData();
    },
    handleBack(row) {
      this.$confirm('是否将此订单回退?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        util
          .$http("/order/recoverOrder", {
            order_no: row.order_no,
          })
          .then((res) => {
            if (res.code == 1) {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.getData();
            }
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消回退'
        });
      });
    }
  },
};
</script>

<style scoped>
.head_search {
  margin-bottom: 20px;
}

.head_search .ipt_box {
  width: 260px;
  margin-right: 20px;
}

.head_search .ipt_box .el-input {
  width: 200px;
}

.head_search .select_box {
  width: 280px;
  margin-right: 20px;
}

.head_search .select_box .el-select {
  width: 200px;
}

.head_search .div_box {
  width: 320px;
  margin-right: 20px;
}

.head_search .div_box .content {
  width: 170px;
  height: 40px;
  padding-left: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  transition: border 0.3s;
  box-sizing: border-box;
}

.head_search .div_box .content:active {
  border-color: #409eff;
}

.head_search .div_box .btn {
  width: 60px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
}

.head_search .date_box {
  width: 630px;
  margin-right: 20px;
}

.head_search .date_box .tip {
  width: 150px;
  margin: 0 0 0 10px;
}

.head_search .switch_box {
  width: 151px;
  margin-right: 20px;
}

.head_search .sub_btn {
  width: 70px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 4px;
}

.head_tip {
  margin: 0 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
}

.iconfont {
  font-size: 15px;
  margin-right: 5px;
}

.el-button--mini,
.el-button--mini.is-round {
  padding: 7px 10px;
}

.pagination_box {
  padding-top: 30px;
}

.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}

/* .order_detail {
  padding: 0 10px;
  margin-top: -15px;
}
.order_detail .txt_list {
  margin-bottom: 15px;
}
.order_detail .ipt_list .el-input {
  width: 150px;
  margin-right: 15px;
}
.order_detail .el-input .el-input__inner {
  height: 36px;
  line-height: 36px;
}
.order_detail .el-button {
  margin-top: 30px;
} */

.order_detail {
  display: flex;
  justify-content: space-around;
  margin: 0 20px;
  margin-top: -30px;
}

.order_detail .boxTitle {
  display: flex;
  align-items: center;
  margin-top: 20px;
  font-size: 20px;
  color: #7E7E7E;
}

.order_detail .blueBox {
  width: 6px;
  height: 22px;
  margin-right: 10px;
  background: #3786E8;
}

.order_detail .itemWrap {
  margin: 12px 20px;
  font-size: 15px;
  color: #7E7E7E;
}

.order_detail .itemWrap div {
  margin-bottom: 10px;
}

.order_detail .itemWrap .userID {
  display: flex;
  cursor: pointer;
}

.order_detail .itemWrap .userID .btn {
  font-size: 15px;
  color: #3786E8;
  background-color: #fff;
  outline: none;
  border: none;
  border-bottom: 2px solid #3786E8;
}

.order_detail .itemWrap .payBox {
  display: flex;
  align-items: center;
}

.order_detail .itemWrap .payBox .payInput {
  width: 150px;
  margin: 0 10px;
}

.order_detail .itemWrap .payBoxTips {
  color: #ED6A6A;
}

.end_order {
  padding-left: 50px;
}

.end_order .txt_list {
  margin-bottom: 20px;
}

.end_order .txt_list .lable {
  display: inline-block;
  width: 80px;
}

.end_order .txt_list ul {
  padding: 0;
  margin: 0;
}

.end_order .txt_list .li {
  margin-bottom: 5px;
  list-style: none;
}

.end_order .radio_list {
  margin-bottom: 20px;
}

.end_order .radio_list .lable {
  display: inline-block;
  width: 80px;
}

.end_order .radio_list .txt {
  margin-left: 20px;
  cursor: pointer;
}

.end_order .ipt_list {
  margin-bottom: 20px;
}

.end_order .ipt_list .lable {
  display: inline-block;
  width: 80px;
}

.end_order .ipt_list .el-input {
  width: 150px;
  margin-right: 15px;
}

.end_order .textarea_list .lable {
  display: inline-block;
  width: 80px;
}

.end_order .textarea_list .el-textarea {
  width: 360px;
}

.end_order .el-button {
  margin-top: 30px;
  margin-left: 80px;
}
</style>

<style>
.end_order .textarea_list .el-textarea__inner {
  min-height: 90px !important;
}

.end_order .el-input .el-input__inner {
  height: 36px;
  line-height: 36px;
}

.order_no {
  display: flex;
}

.danger {
  color: red;
}
</style>
